<!--
* author: lishaobin
* created: 2018/1/3
* describe: 首页
-->
<template>
  <div class="index">
  	<!-- <yd-navbar title="">
        <span slot="left">
            <img src="../assets/stqlogo.png">
        </span>
    </yd-navbar> -->
    <div class="logo">
    	<img src="../assets/stqlogo.png">
    </div>
    <div class="tabmodel">
    	<img class="imgbg" src="../assets/topbg.png">
    	<div class="tabtext">平谷区"生态桥"治理工程</div>
    	<div class="tabbarwrap">
    		<div class="tabitem">
    			<div class="item-icon"><img src="../assets/st.png"></div>
    			<div class="item-text">美化生态环境</div>
    		</div>
    		<div class="tabitem">
    			<div class="item-icon"><img src="../assets/tr.png"></div>
    			<div class="item-text">改良土壤</div>
    		</div>
    		<div class="tabitem">
    			<div class="item-icon"><img src="../assets/hl.png"></div>
    			<div class="item-text">提升农民红利</div>
    		</div>
    	</div>
    </div>
    <div class="textmodel">
    	<div class="texttitle">什么是生态桥工程</div>
    	<div class="textline"></div>
    	<div class="textcon">
    		以平谷区"生态立区"战略为基础，以问题导向为原则，以生态建设为纽带，以解决农业环境污染治理为突破口，以发展循环农业为主要内容，探索政府统筹经济、社会、生态、民生和基层治理各项重大工作的机制创新。
    	</div>
    </div>
    <div class="important">
    	<div class="imp-title">重要意义</div>
    	<div class="impList">
    		<div class="impitem one">
    			<!-- <div class="item-title-top">美化生态环境</div>
    			<div class="item-title-bottom">促进生态循环</div>
    			<div class="item-text">
    				利用废弃枝条，畜禽粪便等，制作有机肥料，实现生态循环利用，美化环境大气。
    			</div> -->
    		</div>
    		<div class="impitem two">
    			<!-- <div class="item-title-top">优化结构</div>
    			<div class="item-title-bottom">改良土壤</div>
    			<div class="item-text">
    				解决了养殖业粪污的处理问题，实现“零排放”和“零污染”，促进土壤改良。
    			</div> -->
    		</div>
    		<div class="impitem three">
    			<!-- <div class="item-title-top">强化惠民为本</div>
    			<div class="item-title-bottom">提升农民红利</div>
    			<div class="item-text">
    				产业红利，让农民变股民，成为生态桥产业的股东；实物红利，让果农置换有机肥，满足一亩地施肥量。
    			</div> -->
    		</div>
    	</div>
    </div>
    <div class="videomodel">
    	<div class="videotitle">
    		平谷区"生态桥"治理工程初探
    	</div>
    	<div class="videocon">
    		<video id="video" src="../assets/stqct.mp4" controls="controls">
			您的浏览器不支持 video 标签。
			</video>
    	</div>
    </div>
    <div class="appsys">
    	<div class="apptext">为搭建“生态桥”治理工程的信息链，进一步提升“生态桥”治理工程的信息化水平和管理运行效率，专门研究开发了“生态桥”治理工程APP管理平台</div>
    	<img class="appimg" src="../assets/showimg.png">
    	<div class="appdirection">
    		该平台集生产管理、生态治理、生态教育、生态服务、村级管理、检查监督与一体，实现政府、企业、村、农户多元合一，监理生态信用体系，通过"互联网+“助力"生态桥”治理工程建设
    	</div>
    </div>
    <div class="usersys">
    	<div class="usersys-title">五大用户体系</div>
    	<img class="usersysimg" src="../assets/listimg.png">
    </div>
    <div class="usersysdirection">
		生态桥工程管理平台的运行让生态桥工程相关各方成为一个有机整体，让各方工作高效便捷，对推动有关各方积极参与生态桥工程具有重要作用，对提高生态桥工程推广的速度和深度有积极的帮助，对工程在透明和公平的环境下运行有突出的保障作用。
	</div>
	<div class="skillmodel">
    	<div class="skill-title">技术支持</div>
    	<div class="imgwrap">
    		<img class="skillimg" src="../assets/ttsxlogo.png">
    	</div>
    	<div class="skilldirection">
			生态桥工程管理平台的运行让生态桥工程相关各方成为一个有机整体，让各方工作高效便捷，对推动有关各方积极参与生态桥工程具有重要作用，对提高生态桥工程推广的速度和深度有积极的帮助，对工程在透明和公平的环境下运行有突出的保障作用。
		</div>
    </div>
    <div class="footer">©2017 BJTTSX</div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: "index",
  components: {
  	
  },
  data(){
  	return{

  	}
  },
  created() {
  	
  },
  methods:{

  }
};
</script>
<style lang="scss" scoped>
@import "../style/public.scss";
	.index{
		.logo{
			padding:rem(24) rem(34);
			img{
				width:rem(166);
				height:rem(56);
			}
		}
		.tabmodel{
			height:rem(232);
			position:relative;
			width:100%;
			.imgbg{
				position:absolute;
				left:0;
				z-index:0;
				height:100%;
				width:100%;
			}
			.tabtext{
				position:absolute;
				width:100%;
				margin:rem(40) 0 rem(32);
				font-size:rem(44);
				color:#fff;
			}
			.tabbarwrap{
				height:rem(150);
				position:absolute;
				top:rem(132);
				box-shadow:0 0 rem(20) 0 rgba(0,0,0,.1);
				border-radius:rem(10);
				z-index:1;
				display:flex;
				margin:0 rem(20);
				width:calc(100% - 0.53333rem);
				background:#fff;
				.tabitem{
					flex:1;
					display:flex;
					flex-direction:column;
					.item-icon{
						margin-top:rem(30);
						width:rem(48);
						height:rem(48);
						margin-bottom:rem(22);
						width:100%;
						text-align:center;
						img{
							height:rem(48);
							width:rem(48);
						}
					}
					.item-text{
						font-size:rem(24);
						color:#72afa7;
					}
				}
			}
		}
		.textmodel{
			margin-top:rem(104);
			padding:0 rem(20) 0;
			.texttitle{
				font-size:rem(40);
				color:#72afa7;
				font-weight:bold;
			}
			.textline{
				width:rem(160);
				height:rem(2);
				background:#72afa7;
				margin:rem(18) auto rem(40);
			}
			.textcon{
				text-align:left;
				font-size:rem(26);
				color:#72afa7;
				padding-bottom:rem(52);
				line-height:rem(48);
				border-bottom:rem(2) solid #e6e6e6;
			}
		}
		.important{
			padding:0 rem(20);
			.imp-title{
				margin:rem(36) 0 rem(48);
				height:rem(36);
				line-height:rem(36);
				font-size:rem(40);
				color:#72afa7;
				border-left:rem(4) solid #72afa7;
				text-align:left;
				padding-left:rem(16);
			}
			.impList{
				display:flex;
				flex-wrap: nowrap;
				overflow-x: auto;
				&::-webkit-scrollbar {
					display: none;
				}
				.impitem{
					width:rem(388);
					height:rem(264);
					flex-shrink:0;
					margin-right:rem(22);
					padding:rem(38) rem(20) 0;
					&:last-child{
						margin-right:0;
					}
					&.one{
						background:url(../assets/imptext1.png) no-repeat left top;
						background-size:100%;
					}
					&.two{
						background:url(../assets/imptext2.png) no-repeat left top;
						background-size:100%;
					}
					&.three{
						background:url(../assets/imptext2.png) no-repeat left top;
						background-size:100%;
					}
					.item-title-top{
						font-size:rem(28);
						color:#fff;
					}
					.item-title-bottom{
						font-size:rem(28);
						color:#fff;
					}
					.item-text{
						margin-top:rem(26);
						font-size:rem(20);
						color:#fff;
						text-align:left;
					}
				}
			}
		}
		.videomodel{
			margin-top:rem(60);
			.videotitle{
				padding:rem(26) 0 rem(20);
				font-size:rem(28);
				color:#fff;
				background:#000;
			}
			.videocon{
				background:#464646;
				padding:rem(20);
				#video{
					width:100%;
				}
			}
		}
		.appsys{
			.apptext{
				font-size:rem(26);
				color:#72afa7;
				line-height:rem(48);
				text-align:left;
				padding:rem(24) rem(20) rem(20);
			}
			.appimg{
				width:100%;
			}
			.appdirection{
				padding:rem(20) rem(20);
				line-height:rem(48);
				background:#686868;
				text-align:left;
				color:#fff;
				font-size:rem(26);
			}
		}
		.usersys{
			padding:0 rem(20);
			.usersys-title{
				margin:rem(36) 0 rem(28);
				height:rem(36);
				line-height:rem(36);
				font-size:rem(40);
				color:#72afa7;
				border-left:rem(4) solid #72afa7;
				text-align:left;
				padding-left:rem(16);
			}
			.usersysimg{
				width:100%;
			}
		}
		.usersysdirection{
			margin-top:rem(20);
			padding:rem(20) rem(20);
			line-height:rem(48);
			background:#686868;
			text-align:left;
			color:#fff;
			font-size:rem(26);
		}
		.skillmodel{
			padding:0 rem(20);
			.skill-title{
				margin:rem(36) 0 rem(28);
				height:rem(36);
				line-height:rem(36);
				font-size:rem(40);
				color:#72afa7;
				border-left:rem(4) solid #72afa7;
				text-align:left;
				padding-left:rem(16);
			}
			.imgwrap{
				border:rem(2) solid #efefef;
				padding:rem(14) rem(40);
				img{
					width:100%;
				}
			}
			.skilldirection{
				padding:rem(20) rem(20) rem(24);
				line-height:rem(48);
				text-align:left;
				color:#9f9f9f;
				font-size:rem(26);
			}
		}
		.footer{
			font-size:rem(20);
			color:#fff;
			background:#000;
			height:rem(44);
			line-height:rem(44);
		}
	}
</style>
